---
title: 실험적 Chrome 개발자 도구 작업공간
sidebar:
  label: Chrome 개발자 도구 작업공간
i18nReady: true
---

import Since from '~/components/Since.astro';
import { Steps } from '@astrojs/starlight/components';


<p>

**타입:** `boolean`<br />
**기본값:** `false`<br />
<Since v="5.13.0" />
</p>

Astro 개발 서버를 위한 실험적인 [Chrome 개발자 도구 작업공간 통합](https://developer.chrome.com/docs/devtools/workspaces)을 활성화합니다.

이 기능을 사용하면 Chrome 개발자 도구에서 직접 파일을 편집하고 연결된 작업공간 폴더를 통해 로컬 파일 시스템에 변경 사항을 반영할 수 있습니다. 브라우저 탭을 벗어나지 않고도 CSS 값 조정과 같은 편집 내용을 적용할 때 유용합니다.

이 기능을 활성화하고 `astro dev` 명령을 실행하면 프로젝트에 대한 Chrome 개발자 도구 작업공간이 자동으로 구성됩니다. 그러면 프로젝트가 [연결할 수 있는 사용 가능한 작업공간 소스](#프로젝트-연결하기)로 나타납니다. 그러면, "Sources" 패널에서 만들어진 변경 사항이 프로젝트 소스 코드에 자동으로 저장됩니다.

이 기능을 활성화하려면 Astro 구성에 실험적 플래그인 `chromeDevtoolsWorkspace`를 추가하세요.

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    chromeDevtoolsWorkspace: true,
  },
});
```

## 프로젝트 연결하기

Astro는 Chrome 개발자 도구 작업공간을 지원하는 데 필요한 구성 파일을 생성합니다. 그러나 파일을 저장하려면 프로젝트가 [소스로 연결](https://developer.chrome.com/docs/devtools/workspaces#manual-connection)되어 있어야 합니다.

<Steps>

1. 사용중인 패키지 관리자에 적합한 CLI 명령어로 [Astro 개발 서버를 실행](/ko/develop-and-build/#astro-개발-서버-시작)합니다.

2. Chrome에서 사이트 미리 보기 (예: `http://localhost:4321/`)로 이동하여 개발자 도구를 엽니다.

3. **Sources** > **Workspaces** 탭에서 Astro 프로젝트 폴더를 찾을 수 있습니다. **Connect**를 클릭하여 디렉터리를 작업공간으로 추가합니다.

</Steps>

자세한 내용은 [Chrome 개발자 도구 작업공간 문서](https://developer.chrome.com/docs/devtools/workspaces#connect)를 참조하세요.
